<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支付宝支付示例</title>
  <!-- 引入 jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 引入 Element UI CSS（用于消息提示样式） -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入 Element UI JS -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>
<button id="goToPayButton">去支付</button>

<script>
  // 模拟 addOrderApi 函数，实际使用时需要替换为真实的 API 请求
  function addOrderApi(params) {
    return new Promise((resolve, reject) => {
      // 这里使用 jQuery 的 AJAX 方法模拟请求，实际中替换为真实的 API 地址
      $.ajax({
        url: 'your-api-url',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(params),
        success: function (res) {
          resolve(res);
        },
        error: function (error) {
          reject(error);
        }
      });
    });
  }

  $(document).ready(function () {
    // 初始化 Element UI 消息提示
    const { Message, Notification } = ElementUI;

    // 为按钮添加点击事件监听器
    $('#goToPayButton').on('click', async function () {
      const note = '这是备注信息';
      const address = {
        id: 1
      };

      const params = {
        remark: note,
        payMethod: 1,
        addressBookId: address.id
      };

      try {
        const res = await addOrderApi(params);
        console.log('params:', params);
        console.log('res:', res);

        if (res.code === 1) {
          // 编码参数，避免特殊字符问题
          const encodedSubject = encodeURIComponent(res.data.consignee);
          const encodedTraceNo = encodeURIComponent(res.data.id);
          const encodedTotalAmount = encodeURIComponent(res.data.amount);

          // 打开支付宝支付页面
          window.open(`http://localhost:80/alipay/pay?subject=${encodedSubject}&traceNo=${encodedTraceNo}&totalAmount=${encodedTotalAmount}`);

          // 提示用户去完成支付
          Message.info('请在打开的页面完成支付');
          // 模拟数据加载逻辑
          console.log('重新加载数据');
        } else {
          Notification({ type: 'warning', message: res.msg });
        }
      } catch (error) {
        console.error('请求添加订单 API 时出错:', error);
        Notification({ type: 'error', message: '请求添加订单失败，请稍后重试' });
      }
    });
  });
</script>
</body>

</html>